<template>
    <div class="main-box-right">
        <el-dialog
        :title=" '修改信息'"
        :visible.sync="isShow"
        >
              <common-form
              :formLabel="operateFormlabel"
              :form="operateForm"
              :inline="true"
              ref="form"
              ></common-form>
             <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="isShow = false">取消</el-button>
                <el-button size="medium" type="primary" @click="confirm">确定</el-button>
              </div>
      </el-dialog>
                <div class="main-box-right-top">
                    <h2>{{title}}</h2>
                    <p>账户信息</p>
                    <div class="main-box-right-part">
                        <p>头像</p>
                        <img src="../../assets/ly/img/1.jpg" class="head-img" width="60px" height="60px" >
                        <input type="file" ref="file" style="display:none;" @change="modifyHeadimg">
                        <button @click="$refs.file.click()">修改</button>
                    </div>
                    <div class="main-box-right-part">
                        <p>昵称</p>
                        <span>用户昵称</span>
                        <button @click="editUsername">修改</button>
                    </div>
                     <div class="main-box-right-part">
                        <p>性别</p>
                        <span>男</span>
                        <button @click="editsex">修改</button>
                    </div>
                    <div class="main-box-right-part">
                        <p>个人简历</p>
                        <span class="introduction">我是一个普通人2312热让他也挺热一头热特一头热退热贴热upoiupoi[poi1接口蛊惑江湖58769789</span>
                        <button @click="editIntroduction">修改</button>
                    </div>
                </div>
    </div>
</template>

<script>
import cookie from '../../cookie/index'
import CommonForm from '@/components/ly/Common/CommonForm'
export default {
    name:'Information',
    components:{CommonForm},
    data() {
      return {
        title:'',
        isShow:false,
        operateFormlabel:[],
        operateForm:{
          userSex :'女',
          userNickname:'',
          introduction:'123123',
          userId:'8'
        }
      }
    },
    mounted(){
      const path = this.$route.path
      if(path === '/shoppersonal/information'){
        this.title='店铺信息'
      }else{
        this.title='个人信息'
      }
    },
    methods:{
      modifyHeadimg(){  
      },
      confirm(){
             this.$http({
                url:'http://zzal.top:8082/shops/user/update/updateUserBasicMessage',
                method:'PUT',
                params:this.operateForm,
                headers:{
                    token:cookie.getToken()
                }
            }).then(data => {
                console.log(data);
            }).catch(err => {
                console.log(err);
            })
      },
      editUsername(){
        this.isShow=true
        this.operateFormlabel =[
           {
            model:'userNickname',
            label:'姓名',
            type:'input',
             display:''
          },
          {
            model:'userId',
            label:'',
            type:'input',
            display:'none'
          },
           {
            model:'introduction',
            label:'  ',
            type:'input',
            display:'none'
          },
           {
            model:'userSex',
            label:' ',
            type:'select',
            display:'none',
            opts:[
              {
                label:'男',
                value:'男'
              },
               {
                label:'女',
                value:'女'
              },
            ]
          },
        ]
      },
      editsex(){
         this.isShow=true
        this.operateFormlabel =[
           {
            model:'userSex',
            label:'性别',
            type:'select',
            display:'',
            opts:[
              {
                label:'男',
                value:1
              },
               {
                label:'女',
                value:0
              },
            ]
          },
          {
            model:'userId',
            label:'',
            type:'input',
            display:'none'
          },
           {
            model:'userNickname',
            label:' ',
            type:'input',
             display:'none'
          },
           {
            model:'introduction',
            label:'  ',
            type:'input',
            display:'none'
          },
        ]
      },
      editIntroduction(){
         this.isShow=true
        this.operateFormlabel =[
           {
            model:'introduction',
            label:'个人简介',
            type:'input',
            display:''
          },
           {
            model:'userSex',
            label:'  ',
            type:'select',
            display:'none',
            opts:[
              {
                label:'男',
                value:1
              },
               {
                label:'女',
                value:0
              },
            ]
          },
          {
            model:'userId',
            label:'',
            type:'input',
            display:'none'
          },
           {
            model:'userNickname',
            label:' ',
            type:'input',
             display:'none'
          },
        ]
      }
    }
}
</script>

<style lang="less" scoped>
@navcolor: rgb(58, 58, 58);
@navfont: 13px;
@width: 1200px;
@hovercolor: #76d4ff;
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
input {
  outline: none;
}
li {
  list-style: none;
}
  button {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 100px;
            font-size: 14px;
            color: #666666;
            height: 40px;
            width: 82px;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
          }
.main-box-right {
      margin-left: 20px;
      float: left;
      width: 900px;
      border-radius: 4px;
      background-color: #ffffff;
      border: 1px solid #e5e5e5;
      margin-bottom: 10px;
      position: relative;
      .main-box-right-top {
        width: 100%;
        // height: 90px;
        h2 {
          margin-top: 10px;
          font-weight: 400;
          padding: 12px 30px;
          font-size: 20px;
        }
        p {
          font-size: 14px;
          padding-left: 32px;
          margin-bottom: 20px;
          color: #838383;
        }
        .main-box-right-part {
          width: 90%;
          height: 90px;
          margin: 0 auto;
          border-top: 1px solid #d6d6d6;
          position: relative;
          p {
            width: 103px;
            display: inline-block;
            text-align: right;
            line-height: 90px;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            &::after {
              content: "";
              height: 100%;
              padding-right: 30px;
              border-right: 2px solid #d6d6d6;
            }
          }
          span {
            margin-left: 30px;
            font-size: 12px;
            color: #666666;
            line-height: 40px;
          }
          .introduction{
            display: inline-block;
            max-width: 500px;
            // height: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          button {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 100px;
            font-size: 14px;
            color: #666666;
            float: right;
            height: 40px;
            width: 82px;
            cursor: pointer;
            margin-top: 20px;
            line-height: 40px;
            text-align: center;
          }
          .head-img {
            position: absolute;
            top: 20px;
            left: 170px;
            border-radius:50% ;
          }
        }
      }
    }
</style>